<!-- 商品标准件结构 -->
<template>
	<div class="app-container">
		<el-row class="mb10">
			<el-col :span="1.5">
				<el-input clearable placeholder="备料单号/物料编码" size="mini" v-model="queryParams.searchValue"></el-input>
			</el-col>
			<el-col :span="1.5">
				<el-input clearable placeholder="单位" size="mini" v-model="queryParams.sft05"></el-input>
			</el-col>
			<el-col :span="1.5">
				<el-input clearable placeholder="仓别" size="mini" v-model="queryParams.sft10"></el-input>
			</el-col>
			<el-col :span="1.5">
				<el-date-picker
					v-model="dateRange"
					style="width: 230px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					size="mini"></el-date-picker>
			</el-col>
			<el-col :span="1.5">
				<el-select
					size="mini"
					v-model="queryParams.customerId"
					clearable
					filterable
					remote
					reserve-keyword
					placeholder="用户编号/名称"
					:remote-method="customerRemoteMethod"
					:loading="customerLoading"
					@clear="handleClear">
					<el-option
						v-for="(item, index) in customerList"
						:key="index"
						:label="item.name"
						:value="item.id"></el-option>
					<el-pagination
						v-show="customerTotal > 0"
						:total="customerTotal"
						:page.sync="customerQueryParams.pageNum"
						:limit.sync="customerQueryParams.pageSize"
						@pagination="handleCustomerList"/></el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					size="mini"
					type="primary" 
					icon="el-icon-search"
					@click="handleSearch"
					v-hasPermi="['system:role:list']">查询</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					size="mini"
					type="danger"
					plain
					icon="el-icon-delete"
					v-hasRole="['afterSales']"
					@click="handleDelete">删除</el-button>
			</el-col>
		</el-row>
		
		<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="备料单号" prop="sfp01" width="120" align="center" />
			<el-table-column label="物料编码" prop="sft02" width="190" align="center" />
			<el-table-column label="单位" prop="sft05" width="120" align="center" />
			<el-table-column label="仓别" prop="sft10" width="190" align="center" />
			<el-table-column label="用户（仓管员）" prop="no" width="160"  align="center">
				<template slot-scope="scope">
					【{{ scope.row.customer != null?scope.row.customer.username:"" }}】{{ scope.row.customer != null?scope.row.customer.name:"" }}
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="isOperate" width="160"  align="center">
				<template slot-scope="scope">
					{{ parseTime(scope.row.createTime) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="mini" icon="el-icon-delete" v-hasPermi="['system:user:admin']" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<pagination
		  v-show="total > 0"
		  :total="total"
		  :page.sync="queryParams.pageNum"
		  :limit.sync="queryParams.pageSize"
		  @pagination="handleQuery"
		/>
	</div>
</template>

<script>
	import { querySftLogByPage, delSftLogByIds } from "@/api/log"
	import { getCustomerList } from "@/api/customer"
	export default {
		data() {
			return {
				list: [],
				loading: true,
				ids: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					searchValue: "",
					sft05: "",
					sft10: "",
					customerId: null,
				},
				dateRange:  [],
				// 用户 begin
				customerList: [],
				customerLoading: false,
				customerQueryParams: {
					pageNum: 1,
					pageSize: 10,
					searchValue: ""
				},
				customerDateRange: [],
				customerTotal: 0,
				// 用户 end
			}
		},
		mounted() {
			let that = this
			that.handleQuery()
			that.handleCustomerList()
		},
		methods: {
			handleSearch(){
				let that = this
				that.pageNum = 1
				that.loading = true
				that.handleQuery()
			},
			async handleQuery() {
				let that = this
				let result = await querySftLogByPage(that.addDateRange(that.queryParams, that.dateRange))
				if(result.code == 200){
					that.loading = false
					that.list = result.rows
					that.total = result.total
				}
			},
			//select搜索事件
			customerRemoteMethod(query) {
				let that = this
				if (query !== '') {
					that.handlecustomerList(query)
				} else {
					// that.customerList = [];
				}
			},
			handleCustomerList(value){
				let that = this
				that.scustomerLoading = true
				let customerQueryParams = that.customerQueryParams
				customerQueryParams.searchValue = value
				// if(value != null && value != ""){
				// 	storeQueryParams.searchValue = value
				// }
				getCustomerList(that.addDateRange(customerQueryParams, that.customerDateRange)).then(res => {
					that.customerLoading = false
					if(res.code == 200){
						let list = res.rows
						that.customerTotal = res.total
						that.customerList = list
					}
				}).catch((e) => {
					console.log(e)
				})
			},
			handleClear(){
				let that = this
				that.handleStoreList()
			},
			handleSelectionChange(selection) {
				let that = this
				that.ids = selection.map(item => item.id)
			},
			handleDelete(row){
				let that = this
				const ids = row.id || that.ids
				if(ids == null || ids == "" || ids.length <= 0){
					that.$modal.msgError("请选择删除的日志")
					return
				}
				that.$modal.confirm("确认删除你选择的日志吗？").then(function() {
					delSftLogByIds(ids).then(res => {
						that.$modal.msgSuccess("删除成功")
						that.handleQuery()
					}).catch(function() {
					})
				}).catch(() => {
					console.log("删除失败")
				})
			},
		}
	}
</script>

<style>
</style>